<template>
	<div class="login-register">
		<div class="contain">
			<div class="big-box" :class="{active:isLogin}">
				<div class="big-contain" key="bigContainLogin" v-if="isLogin">
					<div class="btitle">账户登录</div>
					<div class="bform">
						<input type="text" :placeholder="table.username" v-model="loginData.username">
						<input type="password" :placeholder="table.password" v-model="loginData.password">
					</div>
					<button class="bbutton" @click="login">登录</button>
				</div>
				<div class="big-contain" key="bigContainRegister" v-else>
					<div class="btitle">创建账户</div>
					<div class="bform">
						<input type="text" :placeholder="table.username" v-model="registerData.username">
						<input type="text" :placeholder="table.sex" v-model="registerData.sex">
						<input type="text" :placeholder="table.phoneNumber" v-model="registerData.phoneNumber">
						<input type="text" :placeholder="table.password" v-model="registerData.password">
					</div>
					<button class="bbutton" @click="register">注册</button>
				</div>
			</div>
			<div class="small-box" :class="{active:isLogin}">
				<div class="small-contain" key="smallContainRegister" v-if="isLogin">
					<div class="stitle">你好，朋友!</div>
					<p class="scontent">开始注册，和我们一起旅行</p>
					<button class="sbutton" @click="changeType">注册</button>
				</div>
				<div class="small-contain" key="smallContainLogin" v-else>
					<div class="stitle">欢迎回来!</div>
					<p class="scontent">与我们保持联系，请登录你的账户</p>
					<button class="sbutton" @click="changeType">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { reactive, toRefs } from 'vue'

import { ElMessage, ElMessageBox } from 'element-plus'


export default {
    setup() {
      const dataMap = reactive({
          table: {
              username: "用户名",
              password: "密码",
              login: "登录",
              register: "注册",
              sex: "性别",
              phoneNumber: "手机号"
          },
          loginData: {
              username: '12345678901',
              password: '123'
          },
          registerData: {
              username: "",
              sex: "",
              phoneNumber: "",
              password: ""
          },
        //   是否处于登录状态
          isLogin:false, 
      })
      return {
        ...toRefs(dataMap)
      }
    },
    data() {
      return {
        user: {
          id: '123'
        }
      }
    },
    methods: {
        changeType() {
            this.isLogin = !this.isLogin
            this.form.username = ''
            this.form.useremail = ''
            this.form.userpwd = ''
        },
      // 登录
      login() {
        var _this = this
          this.$axios
              .post('user/login',{
                  "phoneNumber": this.loginData.username,
                  "password": this.loginData.password
              }).then(response=> {
                let stateCode = response.headers["state"]
				if(stateCode == "200"){
					this.$message.success('登录成功!')
					localStorage.setItem("token",response.data.token)
					if(response.data.role == "student" ){
					this.$router.push({
						path: '/student/mainpage',
						name:  "StudentMainpage",
						params: {
						userId: this.user.id
						},
						query: {
						demo: 'a'
						}
					})
					}
					else if(response.data.role == "teacher" ){
					this.$router.push({
						path: '/teacher/mainpage',
						name:  "TeacherMainpage",
						params: {
						userId: this.user.id
						},
						query: {
						demo: 'a'
						}
					})
					}
					else if(response.data.role == "administractor" ){
					this.$router.push({
						path: '/administractor/mainpage',
						name:  "AdministractorMainpage",
						params: {
						userId: this.user.id
						},
						query: {
						demo: 'a'
						}
					})
					}
					else console.log("身份异常")
				}
				else if(stateCode==null){
					this.$message.success("请求数据异常！")
				}
				else{
					this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
				}                      
              })
              .catch(function (error){
                  let stateInfo = error.response.headers["state"]
                  if(stateInfo!=""){
                      _this.$message.error(_this.$enum.getDescByValue('STATE', stateInfo))
                  }
                  console.log(error)
              })
              .then(function (){
                  console.log("测试成功")
              })
          
      },
      // 注册账号
      register() {
          var _this = this
          let formData = new FormData()
          formData.append("username",this.registerData.username)
          formData.append("phoneNumber",this.registerData.phoneNumber)
          formData.append("password",this.registerData.password)
          formData.append("sex",this.registerData.sex)
          ElMessageBox.confirm('你确定注册用户吗？', '警告',
              {
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'Cancel',
                  type: 'warning',
              }
          )
              .then(() => {
                this.$axios
                      .post('user/register',formData)
                      .then( response => {
                          let stateCode = response.headers["state"]
                          if(stateCode=="200"){
                            this.$router.push('./login')
                            this.$message.success('注册用户成功!')
                          }
                          else if(stateCode==""){
                              this.$message.success("注册用户异常！")
                          }
                          else{
                              this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                          }

                      })
                      .catch(function (error){
                          let stateCode = error.response.headers["state"]                            
                          if(stateCode!=""){
                              _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                          }
                          else{
                              _this.$message.error("后端异常")
                          }
                      })
                      .then(function (){
                          console.log("测试成功")
                      }) 
                  })
                  .catch(() => {
                      ElMessage({
                          type: 'error',
                          message: '已取消注册用户',
                      })
                  })
      },
      // 忘记密码
      forgetPassword() {
          this.$router.push('/forgetpassword')
      }
    }
}
</script>

<style scoped="scoped">
	.login-register{
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
	}
	.contain{
		width: 60%;
		height: 60%;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 0 0 3px #f0f0f0,
					0 0 6px #f0f0f0;
	}
	.big-box{
		width: 70%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 30%;
		transform: translateX(0%);
		transition: all 1s;
	}
	.big-contain{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.btitle{
		font-size: 1.5em;
		font-weight: bold;
		color: rgb(57,167,176);
	}
	.bform{
		width: 100%;
		height: 40%;
		padding: 2em 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.bform .errTips{
		display: block;
		width: 50%;
		text-align: left;
		color: red;
		font-size: 0.7em;
		margin-left: 1em;
	}
	.bform input{
		width: 50%;
		height: 30px;
		border: none;
		outline: none;
		border-radius: 10px;
		padding-left: 2em;
		background-color: #f0f0f0;
	}
	.bbutton{
		width: 20%;
		height: 40px;
		border-radius: 24px;
		border: none;
		outline: none;
		background-color: rgb(57,167,176);
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
	}
	.small-box{
		width: 30%;
		height: 100%;
		background: linear-gradient(135deg,rgb(57,167,176),rgb(56,183,145));
		position: absolute;
		top: 0;
		left: 0;
		transform: translateX(0%);
		transition: all 1s;
		border-top-left-radius: inherit;
		border-bottom-left-radius: inherit;
	}
	.small-contain{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.stitle{
		font-size: 1.5em;
		font-weight: bold;
		color: #fff;
	}
	.scontent{
		font-size: 0.8em;
		color: #fff;
		text-align: center;
		padding: 2em 4em;
		line-height: 1.7em;
	}
	.sbutton{
		width: 60%;
		height: 40px;
		border-radius: 24px;
		border: 1px solid #fff;
		outline: none;
		background-color: transparent;
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
	}
	
	.big-box.active{
		left: 0;
		transition: all 0.5s;
	}
	.small-box.active{
		left: 100%;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: inherit;
		border-bottom-right-radius: inherit;
		transform: translateX(-100%);
		transition: all 1s;
	}
</style>